<template>
  <div>
    <Modal
          title="绑定游戏" :mask-closable="false" :closable="false"
          v-model="bindUserNameModal" ok-text="提交" @on-ok="onBindSubmit">
          <label>数字ID:</label>
          <input v-model="uId"  placeholder="游戏数字id" ></input>
    </Modal>
          </br>
          <div class="add-group">
           <!--  <label>上线:</label>
            <input v-model="pUserName"  placeholder="未有上线" disabled  class="tabs-label"></input>
            <Poptip trigger="hover" title="提示" content="如果您当前不是推广员(没有上线)，申请推广员请联系微信客服：XXXX">
                <Icon type="help-circled"></Icon>
            </Poptip> -->
            <!-- <Button type="primary" @click="onAddPromoters" size="large" class="tabs-btn1">增加下线</Button> -->
              <label class="tabs-label">上线:{{pUserName}}, </label>
              <Poptip trigger="hover" title="提示" content="如果您当前不是推广员(没有上线)，申请推广员请联系微信客服：XXXX">
                  <Icon type="help-circled" size="40"></Icon>
              </Poptip>
              <label class="tabs-label">房卡数量:{{keyNum}},</label>
              <label class="tabs-label">今日新增:{{dayAddNum}},</label>
              <label class="tabs-label">今日活跃:{{dayActiveNum}}&nbsp;</label>
              <!--<label class="tabs-label">&nbsp;&nbsp;今日消耗:{{dayUseNum}}</label>-->
              </br></br>
               <!--<Button type="primary" @click="onAddPromotersJabe" size="large" class="tabs-btn">售卡</Button>-->
               <Button type="primary" @click="onAddPromoters" size="large" class="tabs-btn1">增加下线</Button>
          </div>
          <Modal
              title="添加下线"
              v-model="addPromotersModal" ok-text="提交" @on-ok="onSubmit"  class="shouka">
              <label class="tabs-label">数字ID:</label>
              <input v-model="uid" class="tabs-input"></input>
          </Modal>
          <Modal
              title="添加上线" 
              v-model="addPPromotersModal" ok-text="提交" @on-ok="onPSubmit">
              <label class="tabs-label">数字ID:</label>
              <input v-model="pUid" class="tabs-input" ></input>
          </Modal>
          <Modal
              title="售卡" 
              v-model="addPromotersJabeModal" ok-text="提交" @on-ok="onAddJabeSubmit" class="shouka">
               <label class="tabs-label">剩余房卡:{{keyNum}}</label>
               <br/>
              <label class="tabs-label">玩家ID:</label>
              <input v-model="tUId" class="tabs-input"></input>
               <br/>
               <br/>
              <label class="tabs-label">数量:</label>
              <input v-model="tKeyNum" class="tabs-input"></input>
          </Modal>
          <br/>
          <Tabs value="name1"  @on-click="onMyTabChange" >
            <!--<TabPane label="我的下线" name="myPromoters">-->
          <!--<TabPane label="我的下线" name="myPromoters">-->
          <TabPane :label="myPromotersLab" name="myPromoters">
            <Table :border="true" :stripe="true" :show-header="true" :height="700" size="large" :data="tableData" :class='{table_nav:istableNav}' :columns="tableColumns"></Table>
            <Page class="bottom-page tab_page" :total="totalPage" :current="crtPage" :page-size="pageSize" align="middle" show-total show-elevator @on-change="onChange"></Page>
          </TabPane>
            <!--<TabPane label="我的买家" name="myBuyers">-->
            <TabPane :label="myBuyersLab" name="myBuyers">
              <Table :border="true" :stripe="true" :show-header="true" :height="700" :data="myPlayerTableData" :columns="myPlayerTableColumns" :class='{table_nav:istableNav}' size="large"></Table>
              <Page class="bottom-page tab_page" :total="totalMyPlayerPage" :current="crtMyPlayerPage" align="middle" :page-size="myPlayerPageSize" show-total show-elevator @on-change="onMyPlayerChange"></Page></TabPane>
            </Tabs>
    </Tabs>
  </div>
</template>
<script>
import {getVO} from '@/common/proto-vo.js'
import {getMyPromoters, addPromoters, addPPromoters, bindUId, getMySellRoomCardRecords, getMyBuyRoomCardRecords, addPromoterRoomCardNum} from '@/api/promoters.js'
import {getUserBindUId, setUserBindUId, getUId, getUserBindUserName} from '@/common/auth'
import {getRoleBaseInfo} from '@/api/game.js'
// import mainIcon from '@/assets/bianfeng/ico_list_05.png'
export default {
  data () {
    return {
      tableData: [],
      myPlayerTableData: [],
      sellRecordData: [],
      buyRecordData: [],
      userList: [],
      pUserList: [],
      crtPage: 1,
      totalPage: 0,
      pageSize: 10,
      crtSellPage: 1,
      totalSellPage: 0,
      sellPageSize: 10,
      crtBuyPage: 1,
      totalBuyPage: 0,
      buyPageSize: 10,
      crtMyPlayerPage: 1,
      totalMyPlayerPage: 0,
      myPlayerPageSize: 10,
      uId: '',
      uid: '',
      pUid: '',
      pUserName: '未有上线',
      userName: '',
      dayAddNum: 0,
      dayActiveNum: 0,
      dayUseNum: 0,
      tUId: '',
      keyNum: 0,
      tKeyNum: 1,
      selectType: 0,
      addPromotersModal: false,
      bindUserNameModal: false,
      addPPromotersModal: false,
      addPromotersJabeModal: false,
      istableNav: true,
      promotersMgrLab: (h) => {
        return h('div', [
          h('Button', {
            props: {
              type: 'info',
              size: 'large'
            }
          }, '房卡管理')
        ])
      },
      myPromotersLab: (h) => {
        return h('div', [
          h('Button', {
            props: {
              type: 'info',
              size: 'large'
            }
          }, '我的下线')
        ])
      },
      myBuyersLab: (h) => {
        return h('div', [
          h('Button', {
            props: {
              type: 'info',
              size: 'large',
              class: 'tab_button'
            }
          }, '我的买家')
        ])
      },
      roomCardBuyRecordLab: (h) => {
        return h('div', [
          h('Button', {
            props: {
              type: 'info',
              size: 'large'
            }
          }, '房卡购买记录')
        ])
      },
      roomCardSellRecordLab: (h) => {
        return h('div', [
          h('Button', {
            props: {
              type: 'info',
              size: 'large'
            }
          }, '房卡出售记录')
        ])
      }
    }
  },
  created () {
    this.mySearch()
    // this.$router.push('PromotersMain')
  },
  methods: {
    mySearch () {
      let selfId = getUserBindUId()
      let selfName = getUserBindUserName()
      console.log('mySearch selfId:', selfId, 'selfName:', selfName)
      getRoleBaseInfo(selfId, '').then((data) => {
        if (data && data.data.data.data.length > 0) {
          console.log('mySearch get data selfId:', selfId, 'selfName:', selfName, ' ,data:', data.data.data.data[0])
          let RoleBaseInfoVO = getVO('RoleBaseInfoVO')
          let vo = RoleBaseInfoVO.decode(data.data.data.data[0])
          this.keyNum = vo.jabe
        }

        let bindUId = getUserBindUId()
        let uId = getUId()
        console.log('bindUId:', bindUId, 'uId:', uId)
        if (bindUId > 0) {
          this.onSearch()
        } else {
          this.bindUserNameModal = true
          console.log('this.bindUserNameModal:', this.bindUserNameModal)
        }
      })
      // }
    },
    onSearch () {
      console.log('onSearch type:', this.selectType)
      getMyPromoters(this.crtPage, this.pageSize, this.selectType).then((data) => {
        if (!data) {
          return
        }
        let pv = data.data.data
        let len = pv.data.length
        if (this.selectType === 0) {
          this.tableData = []
          let PromotersVO = getVO('PromotersVO')
          for (let i = 0; i < len; i++) {
            let vo = PromotersVO.decode(pv.data[i])
            vo.pUid = vo.pUid.toNumber()
            vo.uid = vo.uid.toNumber()
            vo.lastBuyTime = vo.lastBuyTime.toNumber()
            this.tableData.push(vo)
          }
          this.totalPage = pv.intValues[1]
        } else {
          this.myPlayerTableData = []
          let RoomCardRecordVO = getVO('RoomCardRecordVO')
          for (let i = 0; i < len; i++) {
            let vo = RoomCardRecordVO.decode(pv.data[i])
            vo.id = vo.id.toNumber()
            vo.pUid = vo.pUid.toNumber()
            vo.uid = vo.uid.toNumber()
            vo.lastLoginTime = vo.lastLoginTime.toNumber()
            vo.createTime = vo.createTime.toNumber()
            this.myPlayerTableData.push(vo)
          }
        }
        let pUserName = data.data.data.strValues[0]
        if (pUserName !== '') {
          this.pUserName = pUserName
        }
        this.totalMyPlayerPage = pv.intValues[1]
        let addNum = data.data.data.intValues[2]
        let activeNum = data.data.data.intValues[3]
        let useNum = data.data.data.intValues[4]
        this.dayAddNum = addNum
        this.dayActiveNum = activeNum
        this.dayUseNum = useNum
        console.log('this.tableData:', this.tableData, ', this.dayAddNum:', this.dayAddNum, ',this.dayActiveNum:', this.dayActiveNum, ',this.dayUseNum:', this.dayUseNum)
      })
    },
    onSellSearch () {
      getMySellRoomCardRecords(this.crtPage, this.pageSize).then((data) => {
        if (!data) {
          return
        }
        this.sellRecordData = []
        let RoomCardRecordVO = getVO('RoomCardRecordVO')
        let pv = data.data.data
        let len = pv.data.length
        for (let i = 0; i < len; i++) {
          let vo = RoomCardRecordVO.decode(pv.data[i])
          vo.id = vo.id.toNumber()
          vo.pUid = vo.pUid.toNumber()
          vo.uid = vo.uid.toNumber()
          vo.lastLoginTime = vo.lastLoginTime.toNumber()
          vo.createTime = vo.createTime.toNumber()
          this.sellRecordData.push(vo)
        }

        this.totalSellPage = pv.intValues[1]
        console.log('this.sellRecordData:', this.sellRecordData)
      })
    },
    onBuySearch () {
      getMyBuyRoomCardRecords(this.crtPage, this.pageSize).then((data) => {
        if (!data) {
          return
        }
        this.buyRecordData = []
        let RoomCardRecordVO = getVO('RoomCardRecordVO')
        let pv = data.data.data
        let len = pv.data.length
        for (let i = 0; i < len; i++) {
          let vo = RoomCardRecordVO.decode(pv.data[i])
          vo.id = vo.id.toNumber()
          vo.pUid = vo.pUid.toNumber()
          vo.uid = vo.uid.toNumber()
          vo.createTime = vo.createTime.toNumber()
          this.buyRecordData.push(vo)
        }
        this.totalBuyPage = pv.intValues[1]
        console.log('this.buyRecordData:', this.buyRecordData)
      })
    },
    onTabChange (name) {
      if (name === 'promotersMgr') {
        this.selectType = 0
        this.mySearch()
      } else if (name === 'roomCardSellRecord') {
        this.onSellSearch()
      } else if (name === 'roomCardBuyRecord') {
        this.onBuySearch()
      }
      // this.$Message.info(name)
    },
    onMyTabChange (name) {
      console.log('onMyTabChange name:', name)
      if (name === 'myPromoters') {
        this.selectType = 0
        this.mySearch()
      } else if (name === 'myBuyers') {
        this.selectType = 1
        this.mySearch()
      }
    },
    onAddPromoters () {
      this.addPromotersModal = true
    },
    onAddPromotersJabe () {
      this.addPromotersJabeModal = true
    },
    onBecomePromoters () {
      if (this.pUserName !== '') {
        this.$Message.error('您已经有上线了!!!')
        return
      }
      this.addPPromotersModal = true
    },
    onSubmit () {
      console.log('onSubmit uid:', this.uid)
      if (this.uid === '') {
        this.$Message.error('uid不能为空!!!')
      }
      addPromoters(this.uid).then((data) => {
        if (!data) {
          return
        }
        let success = data.data.data.intValues[0]
        if (success === 1) {
          this.onSearch()
          this.uid = ''
          this.$Message.info('增加推广员成功!!!')
        } else {
          this.$Message.error('增加推广员失败!!!')
        }
      })
    },
    onAddJabeSubmit () {
      let sellNum = parseInt(this.tKeyNum)
      console.log('onAddJabeSubmit tUId=', this.tUId, ',tKeyNum=', sellNum)
      addPromoterRoomCardNum(this.tUId, sellNum).then((data) => {
        if (!data) {
          return
        }
        let success = data.data.data.intValues[0]
        if (success === 1) {
          this.keyNum = parseInt(this.keyNum) - sellNum
          this.onSearch()
          this.$Message.info('划账成功!!!')
        } else {
          this.$Message.error('划账失败!!!')
        }
      })
    },
    onPSubmit () {
      console.log('onPSubmit uid:', this.pUid)
      if (this.pUid === '') {
        this.$Message.error('uid不能为空!!!')
      }
      addPPromoters(this.pUid).then((data) => {
        let success = data.data.data.intValues[0]
        if (success === 1) {
          this.pUserName = data.data.data.strValues[0]
          this.pUid = ''
          this.$Message.info('成为推广员成功!!!')
        } else {
          this.$Message.error('成为推广员失败!!!')
        }
      })
    },
    onBindSubmit () {
      console.log('onBindSubmit uId:', this.uId)
      if (this.uId === '') {
        this.$Message.error('游戏账号不能为空!!!')
      }
      bindUId(this.uId).then((data) => {
        let success = data.data.data.intValues[0]
        let uId = data.data.data.longValues[0]
        if (success === 1) {
          this.uId = ''
          this.userName = this.userName + ',   数字ID: ' + uId.toNumber()
          setUserBindUId(uId.toNumber())
          window.location.href = '/slotmanager'
          this.$Message.info('绑定账号成功!!!')
        } else {
          this.$Message.error('绑定账号失败!!!')
        }
      })
    },
    onChange (item) {
      console.log(item)
      this.crtPage = item
      this.selectType = 0
      this.onSearch()
    },
    onMyPlayerChange (item) {
      console.log(item)
      this.selectType = 1
      this.crtMyPlayerPage = item
      this.onSearch()
    },
    onSellRecordChange (item) {
      console.log(item)
      this.crtSellPage = item
      this.onSellSearch()
    },
    onBuyRecordChange (item) {
      console.log(item)
      this.crtBuyPage = item
      this.onBuySearch()
    }
  },
  computed: {
    tableColumns () {
      let cols = [
        {
          title: 'ID',
          key: 'uid',
          color: '1881B1'
        },
        {
          title: '账号名',
          key: 'userName'
        },
        {
          title: '剩余房卡',
          key: 'keyNum'
        },
        {
          title: '最后购买时间',
          key: 'lastBuyTime'
        },
        {
          title: '最后购买数量',
          key: 'lastBuyKeyNum'
        }
      ]
      return cols
    },
    myPlayerTableColumns () {
      let cols = [
        {
          title: 'ID',
          key: 'uid'
        },
        {
          title: '昵称',
          key: 'userName'
        },
        // {
        //   title: '剩余房卡',
        //   key: 'keyNum'
        // },
        // {
        //   title: '最后登录时间',
        //   key: 'lastLoginTime'
        // },
        {
          title: '最后购买时间',
          key: 'createTime'
        },
        {
          title: '最后购买数量',
          key: 'buyCardNum'
        }
      ]
      return cols
    },
    sellRecordTableColumns () {
      let cols = [
        {
          title: 'ID',
          key: 'uid'
        },
        {
          title: '昵称',
          key: 'userName'
        },
        // {
        //   title: '剩余房卡',
        //   key: 'keyNum'
        // },
        // {
        //   title: '最后登录时间',
        //   key: 'lastLoginTime'
        // },
        {
          title: '购买时间',
          key: 'createTime'
        },
        {
          title: '购买数量',
          key: 'buyCardNum'
        }
      ]
      return cols
    },
    buyRecordTableColumns () {
      let cols = [
        {
          title: '上级ID',
          key: 'pUid'
        },
        {
          title: '上级名字',
          key: 'pUserName'
        },
        {
          title: '购买时间',
          key: 'createTime'
        },
        {
          title: '购买数量',
          key: 'buyCardNum'
        }
      ]
      return cols
    }
  }
}
</script>
<style>
.tabs-label {
    width:300;
    height:300;
    font-size: 30px;
    color: #1881B1;
  }
.tabs-btn {
    width:122px;
    height:100px;
    font-size: 35px;
    margin-left: 20px;
    /*color: #1881B1;*/
}
.tabs-btn1 {
   width:180px;
   height:100px;
   font-size: 35px;
   margin-left: 20px;
  /*color: #1881B1;*/
}
.tabs-input {
    width:300;
    height:100;
    font-size: 30px;
    color: #1881B1;
}
.tab_page{
  font-size: 30px;
  color: #1881B1;
}
.ivu-page-options-elevator input{
  top:-5px;
  font-size: 20px;
  color: #1881B1;
}
 .table_nav{
  font-size: 20px;
  color: #1881B1;
}

 .table_nav table{
  font-size: 18px;
  color: #1881B1;
 }
  .table_nav table th{
    font-size: 32px;
    color: #1881B1;
  }
 .table_nav table td{
  font-size: 25px;
  color: #1881B1;
  }
 .ivu-tabs-nav .ivu-tabs-tab button{
    font-size: 30px;
    height: 90px;
    color: #1881B1;
 }
 .add-group label{
  font-size: 45px;
 }
.shouka .ivu-modal{
  width: 100% ! important;
  padding:30px;
  font-size: 50px;
  color: #1881B1;
}
.shouka .ivu-modal .ivu-modal-content{
  height: 100%;
  color: #1881B1;
}
.shouka .ivu-modal-header-inner{
  font-size: 50px;
  height: 80px;
  line-height: 80px;
  color: #1881B1;
}
.shouka .ivu-modal-body label{
  font-size: 50px;
  color: #1881B1;
}
.shouka .ivu-modal-body input{
  font-size: 50px;
  border: 1px solid #000;
  color: #1881B1;
}
.shouka .ivu-modal-content i{
  display: inline-block;
  height: 50px;
  width: 50px;
  color: #1881B1;
}
.shouka .ivu-modal-content i:before{
  display: inline-block;
  height: 50px;
  font-size: 80px;
  color: #1881B1;
}
.shouka .ivu-modal-footer span{
  display: inline-block;
  font-size: 35px;
  color: #1881B1;
}
</style>
